<template>
  <el-row>
    <el-col :span="24">
      <div class="form-main">
        <el-card>
          <div slot="header" class="text-primary">
            <span class="title"> 用户管理 </span>
           <button @click="userAdd" type="primary" class="pull-right">
           <i class="el-icon-plus"></i>
           </button>
          </div>
          <el-table id="table" :data="tableData" style="width: 100%">
            <el-table-column fixed  label="账户" >
                <template slot-scope="scope">
                  <div class="">
                  <span v-if="scope.row.role==='1'" class="badge primary">普通用户</span>
                     <span v-if="scope.row.role==='2'" class="badge danger">管理员</span>
                  {{scope.row.username}} 
                    
                  </div>
                </template>
            </el-table-column>
            <el-table-column prop="realname" label="姓名"> </el-table-column>
            <el-table-column prop="gender" label="性别"> </el-table-column>
            <el-table-column prop="birthday" label="生日">
            <template slot-scope="scope">
                  <div class="">
                
                  {{scope.row.birthday.substring(0,10)}} 
                    
                  </div>
                </template>
             </el-table-column>
            <el-table-column prop="tel" label="电话"> </el-table-column>
            <el-table-column prop="email" label="邮箱"> </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
              <template slot-scope="scope">
                <el-button @click="showDialog(scope.row,scope.$index)" type="primary" size="small">编辑</el-button>
                <el-button v-if="scope.row.role!=2" @click="deleteData(scope.row,scope.$index)" type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>

<el-dialog
  title="选择操作"
  :visible.sync="dialogVisible"
  width="30%">
  <span>
    <el-button @click="setInfo(rowId)">信息设置</el-button>
  <el-button @click="setPwd(rowId)" type="primary">密码设置</el-button>
  <el-button @click="setAvatar(rowId)" type="success">头像上传</el-button>
    <!-- <router-link class="" :to="'/profile?id='+rowId">更新</router-link> -->
  </span>
  <span slot="footer" class="dialog-footer">
    
    <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
  </span>
</el-dialog>

    </el-col>
  </el-row>
</template>
<script>
import { getList ,deleteData} from '@/api/accountApi'
export default {
  data() {
    return {
      dialogVisible:false,
      rowId:0,
      tableData: [],
    }
  },
  created() {
    this.$nextTick(() => {
      this.getList()
    })
  },
  methods: {
    userAdd(){
 this.$router.push('/dashboard/user-add')
    },
    roleFormat(row,column){
let fh = row.role === '1'?'普通用户':'管理员'
      let result = '<div>'+row.username+'<span class="badge">'+fh+'</span></div>'
      return result
    },
    setInfo(account_id){
      this.$router.push('/dashboard/profile?id='+account_id)
    },
     setPwd(account_id){
      this.$router.push('/dashboard/password?id='+account_id)
    },
     setAvatar(account_id){
      this.$router.push('/dashboard/avatar?id='+account_id)
    },
    showDialog(row,index){
     // console.log({row,index})
      this.dialogVisible = true
      this.rowId = this.tableData[index].id
    },
    deleteData(row,index){
       this.$confirm('你确定要删除吗？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(() => {
           deleteData({id:this.tableData[index].id}).then(resp=>{
            this.$message.success({
              message:'删除成功',type:'success'
            })
            this.getList()
           })
          })
          .catch(action => {
            
          });
      
    },
    getList() {
      getList({}).then((resp) => {
        console.log(resp)
        this.tableData = resp.data.data
      })
    },
  },
}
import '@/assets/css/variables.css'
</script>
<style scoped>
.el-card {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--border-color);
}
::v-deep .el-card__header {
  border-bottom: 1px solid var(--border-color);
}
::v-deep .el-table,
::v-deep .el-table tr ,
::v-deep .el-table th.el-table__cell,
::v-deep .el-table__body tr.hover-row.current-row > td.el-table__cell,
::v-deep .el-table__body
  tr.hover-row.el-table__row--striped.current-row
  > td.el-table__cell,
::v-deep .el-table__body
  tr.hover-row.el-table__row--striped.selection-row
  > td.el-table__cell,
::v-deep .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
::v-deep .el-table__body tr.hover-row.selection-row > td.el-table__cell,
::v-deep .el-table__body tr.hover-row > td.el-table__cell {
  background: none;
}

::v-deep .el-table td.el-table__cell, ::v-deep.el-table th.el-table__cell.is-leaf{ 

   border-bottom: 1px solid var(--border-color);
}
</style>
